<template>
  <div class="xd">
    <div class="ba" style="height: 210px;width: 100%;min-width: 1200px;">
      <div class="jz split_4_6" style="width: 1200px">
        <div class=""><a href=""><img src="../../assets/img/web-logo.png"/></a></div>
        <div class="">
          <div class="wz_rigdq"><img src="../../assets/img/txt.png" /></div>
          <div class="ddisp boxs" style="padding-left: 250px">
            <div class="mag_t-2">
              <div class="ddisp xd wh_f flex_r">
                <div class="wz_jz" style="margin-left: 20px">
                  <div class="split_8_2 wz_jz jz" style="width: 324px;height:30px;border: 2px solid #0069df;background-color: #0069df;">
                    <div><input v-model="SearchText" type="text" class="wh_max xc boxs bor_none fz_14" style="padding: 0 10px;height: 30px;background-color: white" placeholder="请输入搜索内容"></div>
                    <div class="wz_white" style="background-color: #0069df;height: 30px" @click="Search"><div class="he_max jz_flex xsgb"><span>
                  <i class="iconfont icon-sousuo"></i>
                </span></div></div>
                  </div>
                </div>
                <div class="centerdq" style="padding-left: 30px">
                  <a href="//weibo.com/ep12?is_hot=1" title="微博" class="wz_red" style="margin: 0 20px" target="_blank">
                    <i class="iconfont icon-weibo" @mousemove="add(1)" @mouseout="edd()" :class="a==1?'wz_red':'wz_blu'" style="font-size: 30px"></i>
                  </a>
                  <i @mousemove="add(2)" @mouseout="edd()" class="iconfont icon-weixin xsgb" :class="a==2?'wz_gr':'wz_blu'" style="font-size: 30px"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="wz_jz wz_white" v-if="false" style="background-color: #0069df;min-width: 1200px;">
      <div class="wh_f pad_12_0 hh wh_f jz" style="min-width: 1200px;width: 1200px">
        <div style="flex: 25" class="bor_r boxs split_3_7 fz_14">
          <div class="fz_20 em">资讯</div>
          <div class="xsgb">
            <div class="split_4">
              <div><span @click="bddList(364)">聚焦</span></div>
              <div><span @click="bddList(420)">动态</span></div>
              <div><span @click="bddList(365)">公告</span></div>
              <div><span @click="cdd('tushuo')">图说</span></div>
            </div>
            <div class="split_4 mag_t-10">
              <div><span @click="cdd('shidian')">视点</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/hot/')">专题</span></div>
              <div><span @click="addList('renwu')">人物</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/zhongdasaishi/jinendasai1/')">大赛</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 30" class="bor_r boxs split_3_7 fz_14">
          <div class="fz_20 em">中职</div>
          <div class="xsgb">
            <div class="split_3">
              <div><span @click="bddList(368)">院校动态</span></div>
              <div><span @click="bddList(407)">招生快讯</span></div>
              <div><span @click="wailian('http://weiphp.ep12.com/')">升学辅导</span></div>
            </div>
            <div class="split_3 mag_t-10">
              <div><span @click="wailian('http://www.ep12.com/a/zz/xx/')">快速选校</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/zhongzhi/zhuanye/nonglinmuyulei/')">热门专业</span></div>
              <div><span @click="wailian('https://wmfc.ep12.com/index.php?m=content&c=index')">文明风采</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 25" class="bor_r boxs split_3_7 fz_14">
          <div class="fz_20 em">高职</div>
          <div class="xsgb">
            <div class="split_2">
              <div><span @click="bddList(369)">院校动态</span></div>
              <div><span @click="bddList(407)">招生快讯</span></div>
            </div>
            <div class="split_2 mag_t-10">
              <div><span @click="wailian('http://www.ep12.com/a/gz/xx/')">快速选校</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/gaozhi/zhuanye/2017/1112/48804.html')">热门专业</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 20" class="flex_1 split_3_7 fz_14">
          <div class="fz_20 em">服务</div>
          <div class="xsgb">
            <div class="split_2">
              <div><span @click="wailian('http://www.ep12.com/a/zhengshu/')">考证</span></div>
              <div><span @click="wailian('http://www.ep12.com/member/index.php')">会员中心</span></div>
            </div>
            <div class="split_2 mag_t-10">
              <div><span @click="wailian('http://www.ep12.com/templets/2023/default/maintainPage.html')">年鉴</span></div>
              <div><span @click="addList('jiaoyanjiaogai')">教研教改</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wz_white" style="background-color: #0069df;min-width: 1200px;">
      <div class="wh_f pad_10_0 hh wh_f jz" style="min-width: 1200px;width: 1200px;display: -webkit-flex;flex-direction: row;justify-content: space-between;">
        <div style="flex: 25;flex-direction: row;justify-content: space-between;" class="bor_r boxs fz_14 ddisp">
          <div class="fz_20 em centerdq wz_jz" style="width: 50px">资讯</div>
          <div class="xsgb centerdq" style="width: calc(100% - 50px)">
            <div class="ddisp hh tab_r1">
              <div><span @click="bddList(364)">聚焦</span></div>
              <div><span @click="bddList(420)">动态</span></div>
              <div><span @click="bddList(365)">公告</span></div>
              <div><span @click="cdd('tushuo')">图说</span></div>
              <div><span @click="cdd('shidian')">视点</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/hot/')">专题</span></div>
              <div><span @click="addList('renwu')">人物</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/zhongdasaishi/jinendasai1/')">大赛</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 31;flex-direction: row;justify-content: space-between;" class="bor_r boxs fz_14 ddisp">
          <div class="fz_20 em centerdq" style="width: 100px"><span style="margin-left: 50px">中职</span></div>
          <div class="xsgb centerdq" style="width: calc(100% - 100px)">
            <div class="ddisp hh tab_r1">
              <div><span @click="bddList(368)">院校动态</span></div>
              <div><span @click="bddList(407)">招生快讯</span></div>
              <div><span @click="wailian('http://weiphp.ep12.com/')">升学辅导</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/zz/xx/')">快速选校</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/zhongzhi/zhuanye/nonglinmuyulei/')">热门专业</span></div>
              <div><span @click="wailian('https://wmfc.ep12.com/index.php?m=content&c=index')">文明风采</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 24;flex-direction: row;justify-content: space-between;" class="bor_r boxs fz_14 ddisp">
          <div class="fz_20 em centerdq wz_jz" style="width: 82px"><span style="margin-left: 42px">高职</span></div>
          <div class="xsgb centerdq" style="width: calc(100% - 82px)">
            <div class="ddisp hh tab_r1">
              <div><span @click="bddList(369)">院校动态</span></div>
              <div><span @click="bddList(407)">招生快讯</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/gz/xx/')">快速选校</span></div>
              <div><span @click="wailian('http://www.ep12.com/a/gaozhi/zhuanye/2017/1112/48804.html')">热门专业</span></div>
            </div>
          </div>
        </div>
        <div style="flex: 20;flex-direction: row;justify-content: space-between;" class="fz_14 ddisp">
          <div class="fz_20 em centerdq wz_jz" style="width: 75px"><span style="margin-left: 35px">服务</span></div>
          <div class="xsgb centerdq" style="width: calc(100% - 75px)">
            <div class="ddisp hh tab_r1">
              <div><span @click="wailian('http://www.ep12.com/a/zhengshu/')">考证</span></div>
              <div><span @click="wailian('http://www.ep12.com/member/index.php')">会员中心</span></div>
              <div><span @click="wailian('http://www.ep12.com/templets/2023/default/maintainPage.html')">年鉴</span></div>
              <div><span @click="addList('jiaoyanjiaogai')">教研教改</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="false" style="background-color: #0069df">
      <div class="ddisp jz xd wh_f" style="min-width: 1200px;background-color: #0069df;width: 1200px">
        <div class="container flex_r pad_5_0">
          <nav class="xsgb" style="color: white">
            <a @mousemove="addRoot(0)"  @mouseout="eddRoot">
              <a href="">首页</a></a>
            <a @mousemove="addRoot(1)"  @mouseout="eddRoot">资讯
              <div v-show="xiala==1">
                <div style="height: 5px"></div>
                <div class="xl">
                  <div @click="bddList(364)" class="bor_top">聚焦</div>
                  <div @click="bddList(420)">动态</div>
                  <div @click="bddList(365)">公告</div>
                  <div @click="cdd('tushuo')">图说</div>
                  <div @click="cdd('shidian')">视点</div>
                  <div @click="wailian('http://www.ep12.com/a/hot/')">专题</div>
                  <div @click="addList('renwu')">人物</div>
                  <div @click="wailian('http://www.ep12.com/a/zhongdasaishi/jinendasai1/')" class="bor_bott">大赛</div></div>
              </div>
            </a>
            <a @mousemove="addRoot(2)"  @mouseout="eddRoot">中职
              <div v-show="xiala==2">
                <div style="height: 5px"></div>
                <div class="xl">
                  <div @click="bddList(368)" class="bor_top">院校动态</div>
                  <div @click="bddList(406)">招生快讯</div>
                  <div @click="wailian('http://weiphp.ep12.com/')">升学辅导</div>
                  <div @click="wailian('http://www.ep12.com/a/zz/xx/')">快速选校</div>
                  <div @click="wailian('http://www.ep12.com/a/zhongzhi/zhuanye/nonglinmuyulei/')">热门专业</div>
                  <div @click="wailian('https://wmfc.ep12.com/index.php?m=content&c=index')" class="bor_bott">
                    文明风采
<!--                    <a class="aaa" href="https://wmfc.ep12.com/index.php?m=content&c=index">文明风采</a>-->
                  </div>
                </div>
              </div></a>
            <a @mousemove="addRoot(3)"  @mouseout="eddRoot">高职
              <div v-show="xiala==3">
                <div style="height: 5px"></div>
                <div class="xl">
                  <div @click="bddList(369)" class="bor_top">院校动态</div>
                  <div @click="bddList(407)">招生快讯</div>
                  <div @click="wailian('http://www.ep12.com/a/gz/xx/')">快速选校</div>
                  <div @click="wailian('http://www.ep12.com/a/gaozhi/zhuanye/2017/1112/48804.html')" class="bor_bott">热门专业</div>
                </div>

              </div></a>
            <a @mousemove="addRoot(4)"  @mouseout="eddRoot">服务
              <div v-show="xiala==4">
                <div style="height: 5px"></div>
                <div class="xl">
                  <div @click="wailian('http://www.ep12.com/a/zhengshu/')" class="bor_top">考证</div>
                  <div @click="wailian('http://www.ep12.com/member/index.php')">会员中心</div>
                  <div @click="wailian('http://www.ep12.com/templets/2023/default/maintainPage.html')">年鉴</div>
                  <div @click="addList('jiaoyanjiaogai')"  class="bor_bott">教研教改</div>
                </div>

              </div></a>
            <div class="animation start-zixun"></div>
          </nav>
        </div>
        <div class="ddisp xd wh_f flex_r">
          <div class="wz_jz" style="margin-left: 20px">
            <div class="split_8_2 wz_jz jz" style="width: 324px;height:30px;border: 2px solid #0069df;background-color: #0069df;">
              <div><input v-model="SearchText" type="text" class="wh_max xc boxs bor_none fz_14" style="padding: 0 10px;height: 30px" placeholder="请输入搜索内容"></div>
              <div class="wz_white" style="background-color: #4f80f0;height: 30px" @click="Search"><div class="he_max jz_flex xsgb"><span>
                  <i class="iconfont icon-sousuo"></i>
                </span></div></div>
            </div>
          </div>
          <div class="centerdq" style="padding-left: 30px">
            <a href="//weibo.com/ep12?is_hot=1" title="微博" class="wz_red" style="margin: 0 20px" target="_blank">
              <i class="iconfont icon-weibo" @mousemove="add(1)" @mouseout="edd()" :class="a==1?'wz_red':'wz_blu'" style="font-size: 30px"></i>
            </a>
              <i @mousemove="add(2)" @mouseout="edd()" class="iconfont icon-weixin xsgb" :class="a==2?'wz_gr':'wz_blu'" style="font-size: 30px"></i>
          </div>
        </div>
        <img class="jd" style="right:-100px;top: -30px;z-index: 1" v-show="a==2" src="../../assets/img/wx.jpg" height="100" width="100"/>
      </div>
    </div>
  </div>

</template>

<script>
import {getArticle, getSearchApi} from "@/api/api";
import {Toast} from "vant";

export default {
  name: "tpoList",
  data(){
    return{
      a:0,
      xiala:999,
      SearchText:'',
    }
  },
  methods:{
    Search(){
      if(this.SearchText){
        // 判断当前路由是否为搜索内容页面 如果是直接执行查询
        if(this.$route.path=='/Searchcontent'){
          console.log(11111)
          this.$store.state.SearchText=this.SearchText
          let params = {
            text:this.SearchText
          };
          getSearchApi(params).then(res => {
            if (res.status==200) {
              console.log('我请求了数据')
              this.$store.state.testage++
              var shuju = JSON.stringify(res.data);
              localStorage.setItem('搜索数据',shuju)
              console.log(this.$store.state.testage)
              // console.log('我存储了数据',JSON.parse(localStorage.getItem('搜索数据')))
              // this.$store.state.SelectList=
            } else {
              console.log(res.msg)
            }
          });
        }else{
          this.$store.state.SearchText=this.SearchText
          let inputText = this.SearchText
          let daohang=[
            {tit:'首页',path:'homeList'},
            {tit:'搜索',path:'Searchcontent'},
          ]
          this.$router.push({
            path:'Searchcontent',
            query:{
              daohang,
              inputText
            }
          })
        }

      }else{
        Toast("请输入搜索内容 !");
      }
      // SearchText
    },
    addRoot(e){
      this.xiala=e
},
    eddRoot(){
      this.xiala=999
},
    add(e){
      this.a=e
    },
    edd(){
      this.a=0
    },
    addList(e){
      this.$router.push({
        path:e
      })
    },
    bddList(e){
      let listid = e
      let tit = [
        {tit:'首页',path:'homeList'},
        {tit:'院校动态',path:'xinwenzhongxin'},
      ]
      var titlist=JSON.stringify(tit);
      this.$router.push({
        path:'middleList',
        query:{
          listid,
          titlist
        }
      })
    },
    cdd(e){
      this.$router.push(e)
    },
    wailian(e){
      window.location.href = e
    }
  }
}
</script>

<style scoped>
.ba{
  background: url("../../assets/img/head-top-bg.jpg");
}
.bor_r{
  border-right: 1px solid white;
}
.xsgb span:hover{
  color: #fff17a;
}
a:link{color: white}
a:visited{color: white}
a:hover{color: white}
a:active{color: white}
.wz_blu{
  color: #b2cadc;
}
.wz_gr{
  color: #409734;
}
nav{
  position: relative;
  width: 700px;
  height: 50px;
}
nav a{
  /*padding: 5px 0;*/
  position: relative;
  display: block;
  float: left;
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  z-index: 10;
  font-weight:bold;
}
nav a:nth-child(1){
  width: 140px;
}
nav a:nth-child(2){
  width: 140px;
}
nav a:nth-child(3){
  width: 140px;
}
nav a:nth-child(4){
  width: 140px;
}
nav a:nth-child(5){
  width: 140px;
}
nav .animation{
  position: absolute;
  height: 100%;
  width: 140px;
  background-color: #4f80f0;
  z-index: 9;
  border-radius: 8px;
  transition: all 0.3s;
}
.start-zixun,
nav a:nth-child(1):hover~.animation{
  width: 140px;
  left: 0;
}
.start-zhongzhi,
nav a:nth-child(2):hover~.animation{
  width: 140px;
  left: 140px;
}
.start-gaozhi,
nav a:nth-child(3):hover~.animation{
  width: 140px;
  left: 280px;
}
.start-fuwu,
nav a:nth-child(4):hover~.animation{
  width: 140px;
  left: 420px;
}
.start-fuwu,
nav a:nth-child(5):hover~.animation{
  width: 140px;
  left: 560px;
}
.xl{
  position: absolute;
  z-index: 10;
  background-color: white;
  color: #1a1a1a;
  top: 55px;
  left: 0;
  width: 140px;
  font-size: 14px;
  font-weight:lighter;
  box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
  text-decoration: none;
  border-radius: 8px;
}
.aaa{
  color: #1a1a1a;
  font-size: 14px;
  line-height: 34px;
}
.xl>div{
  height: 34px;
  line-height: 34px;
  transition: all 0.1s;
}
.xl>div:hover{
  background-color: #4f80f0;
  color: white;
  transition: all 1s;
}
.bor_top{
  border-radius: 5px 5px 0 0;
}
.bor_bott{
  border-radius: 0 0 5px 5px;
}
</style>
